<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .focus {
      position: relative;
      width: 721px;
      height: 455px;
      background-color: purple;
      overflow: hidden;
    }

    .focus ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 600%;
      list-style: none;
    }

    .focus ul li {
      float: left;
    }
    .arrow-left,
    .arrow-right {
      display: none;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 24px;
      height: 40px;
      background: rgba(0, 0, 0, 0.3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-family: "icomoon";
      font-size: 18px;
      z-index: 2;
      text-decoration: none;
    }

    .arrow-right {
      right: 0;
    }
    .circle {
      position: absolute;
      bottom: 10px;
      left: 50px;
      list-style: none;
    }

    .circle li {
      float: left;
      width: 8px;
      height: 8px;
      /*background-color: #fff;*/
      border: 2px solid rgba(255, 255, 255, 0.5);
      margin: 0 3px;
      border-radius: 50%;
      /*鼠标经过显示小手*/
      cursor: pointer;
    }
    .current {
      background-color: #fff;
    }
  </style>
  <body>
    <div class="focus fl">
      <!-- 左侧按钮 -->
      <a class="arrow-left">&lt;</a>
      <!-- 右侧按钮 -->
      <a class="arrow-right">&gt;</a>
      <!-- 核心的滚动区域 -->
      <ul>
        <li>
          <a href="#"><img src="assets/img/focus.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="assets/img/focus1.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="assets/img/focus2.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="assets/img/focus3.jpg" alt="" /></a>
        </li>
      </ul>
      <!-- 小圆圈 -->
      <ol class="circle"></ol>
    </div>
  </body>

  <script>
    let arrow_left = document.querySelector(".arrow-left");
    let arrow_right = document.querySelector(".arrow-right");
    let focus = document.querySelector(".focus");
    let focusWidth = focus.offsetWidth;
    let num = 0;

    // 自动显示 上一张/下一张
    focus.addEventListener("mouseenter", () => {
      arrow_left.style.display = "block";
      arrow_right.style.display = "block";
      clearInterval(timer);
      timer = null;
    });
    focus.addEventListener("mouseleave", () => {
      arrow_left.style.display = "none";
      arrow_right.style.display = "none";
      timer = setInterval(() => {
        arrow_right.click();
      }, 2000);
    });
    // 动态生成小圆点
    let ul = focus.querySelector("ul");
    let ol = focus.querySelector("ol");
    for (let i = 0; i < ul.children.length; i++) {
      const li = document.createElement("li");
      li.setAttribute("index", i);
      // 绑定事件
      li.addEventListener("click", function () {
        for (let i = 0; i < ol.children.length; i++) {
          ol.children[i].className = "";
        }
        this.className = "current";
        let index = this.getAttribute("index");
        num = index;
        circle = index;

        animate(ul, -index * focusWidth);
      });
      ol.appendChild(li);
    }
    ol.children[0].className = "current";

    // 复制第一张图片
    let first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    let circle = 0;
    arrow_left.addEventListener("click", () => {
      if (num === 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focusWidth + "px";
      }
      num = num - 1;
      animate(ul, -num * focusWidth);
      // 同步小圆圈
      circle = circle - 1;
      if (circle < 0) {
        circle = ol.children.length - 1;
      }
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      ol.children[circle].className = "current";
    });

    arrow_right.addEventListener("click", () => {
      if (num === ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num = num + 1;
      animate(ul, -num * focusWidth);
      // 同步小圆圈
      circle = circle + 1;
      if (circle == ol.children.length) {
        circle = 0;
      }
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      ol.children[circle].className = "current";
    });

    // 自动播放轮播图
    let timer = setInterval(() => {
      arrow_right.click();
    }, 2000);

    function animate(obj, target, callback) {
      clearInterval(obj.timer);

      obj.timer = setInterval(() => {
        let step = Math.ceil((target - obj.offsetLeft) / 10);
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft === target) {
          clearInterval(obj.timer);
          callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + "px";
      }, 15);
    }
  </script>
</html>
